<template>
  <div class="my">
    <header>
      <div class="top">
        <span class="iconfont icon-zuojiantou" @click="goBack"></span>
        <span class="iconfont icon-home"></span>
      </div>
      <div class="login" @click="goLogin" v-show="!loginState">
        <span>登录/注册</span>
      </div>
      <div class="userInfo" v-show="loginState">
        <div class="img">
          <img :src="userInfo.imgUrl" alt="" />
        </div>
        <span>{{ userInfo.nickName }}</span>
      </div>
    </header>
    <section class="wrapper">
      <div>
        <div class="personal">
          <span> 个人中心 </span>
        </div>
        <ul class="person">
          <li>
            <i class="iconfont icon-geren left"></i>
            <span>我的拼团</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li>
            <i class="iconfont icon-jinbi left"></i>
            <span>我的羽币</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li>
            <i class="iconfont icon-xingxing left"></i>
            <span>我的收藏</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li @click="goPath">
            <i class="iconfont icon-dizhiguanli left"></i>
            <span>地址管理</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
        </ul>
        <div class="kg"></div>
        <div class="personal">
          <span>福利优惠</span>
        </div>
        <ul class="person">
          <li>
            <i class="iconfont icon-zhibi_renminbi_o left"></i>
            <span>优惠劵</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li>
            <i class="iconfont icon-shangcheng left"></i>
            <span>羽币市场</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
        </ul>
        <div class="kg"></div>
        <div class="personal">
          <span>专属服务</span>
        </div>
        <ul class="person">
          <li>
            <i class="iconfont icon-kefu left"></i>
            <span>我的客服</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li>
            <i class="iconfont icon-gongkaiyijianxiang left"></i>
            <span>意见箱</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
          <li>
            <i class="iconfont icon-jiaruwomen left"></i>
            <span>加入我们</span>
            <i class="iconfont icon-youjiantou right"></i>
          </li>
        </ul>
        <div class="personal ccc" v-if="loginState" @click="loginOut">
          <span style="color: red">退出登录</span>
        </div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { mapState } from "vuex";
import Tabbar from "@/components/Tabbar.vue";
import BetterScroll from "better-scroll";
export default {
  name: "My",
  data() {
    return {
      oBetterScroll: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo", "loginState"]),
  },
  components: {
    Tabbar,
  },
  mounted() {
    this.oBetterScroll = new BetterScroll(".wrapper", {
      movable: true,
      zoom: true,
      probeType: 3,
      click: true,
      bounce: false,
      disableTouch: false,

    });
    console.log(mapState);
  },
  methods: {
    ...mapMutations("user", ["user_login"]),
    goPath(){
      this.$router.push({
        path:'/path'
      })
    },
    goLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    goBack() {
      this.$router.back();
    },
    // 退出登录
    // 调用vuex中的方法
    loginOut() {
      this.$store.commit("user/loginOut");
    },
  },
};
</script>

<style scoped>
.ccc {
  text-align: center;
}
.userInfo .img {
  height: 60%;
  width: 60%;
  border-radius: 50%;
  margin-bottom: 1vh;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.userInfo span {
  font-size: 16px;
  text-align: center;
}
.my {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  overflow: hidden;
}
.kg {
  height: 5px;
  width: 100%;
  background-color: #eee;
}
.person {
  display: flex;
  flex-direction: column;
}
.person li {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  justify-content: space-between;
}
.person li i {
  font-size: 22px;
}
.person li .left {
  color: red;
  padding: 0 10px;
}
.person li span {
  flex: 1;
  padding-left: 10px;
}
.person li .right {
  padding-right: 10px;
}
.personal {
  height: 40px;
  font-size: 18px;
  color: #aaa;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}

header {
  position: relative;
  width: 100%;
  height: 30vh;
  background-color: rgba(180, 0, 0, 1);
}
.userInfo {
  width: 20vh;
  height: 20vh;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.top .iconfont {
  height: 35px;
  width: 35px;
  font-size: 26px;
  padding-top: 5px;
  color: #eee;
}
.login {
  background-color: orange;
  border-radius: 10px;
  color: #eee;
  padding: 5px;
  font-size: 18px;
  border: 1px solid rgba(200, 0, 0, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
</style>